<template>
	<view class="main-cont box box-tb">
		<view class="tr box box-tb box-align-center">
			<u-avatar :src="user.avatarUrl" mode="circle" size="150"></u-avatar>
			<view class="tr-name">
				{{user.nickName}}
			</view>
			<view class="school">
				{{info.schoolName}}
			</view>
		</view>
		<view class="select" style="height: 400rpx;padding: 20rpx 89rpx;">
			<u-form :model="form" ref="uForm" label-width="90" label-position="left">
				<u-form-item label="名称" :border-bottom="false" prop="bjmc">
					<u-input v-model="form.bjmc" placeholder="请填写班级名称"></u-input>
				</u-form-item>
				<u-form-item prop="zydm" label="专业" :border-bottom="false">
					<u-input v-model="form.zymc" disabled placeholder="请选择专业" @click="form.showzy = true"></u-input>
					<view class="posa">
						<u-icon name="arrow-right"></u-icon>
					</view>
					<u-select v-model="form.showzy" :list="form.zylist" @confirm="confirm"></u-select>
				</u-form-item>
				<u-form-item label="学级" :border-bottom="false">
					<u-input v-model="form.xjmc" disabled placeholder="请选择学级" @click="form.showxj = true"></u-input>
					<view class="posa">
						<u-icon name="arrow-right"></u-icon>
					</view>
					<u-select v-model="form.showxj" :list="form.xjlist" @confirm="confirmxj"></u-select>
				</u-form-item>
				<u-button type="primary" :customStyle="btn" @click="handleHoldOnCreate">稍后创建</u-button>
				<u-button type="primary" :customStyle="btn" @click="createclass">完成</u-button>
			</u-form>
		</view>
		<u-toast ref="uToast" />
		<u-top-tips ref="uTips"></u-top-tips>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync("wxUser"),
				form: {
					zydm: '',
					zymc: '',
					showzy: false,
					zylist: [],
					bjdm: '',
					bjid: '',
					showbj: false,
					bjlist: [],
					xj: '',
					xjmc: '',
					showxj: false,
					xjlist: [],
					bjmc: ''
				},
				btn: {
					margin: "100rpx auto 0",
					width: "466rpx",
					height: "72rpx",
					lineHeigt: "72rpx",
					background: "linear-gradient(180deg, #7686F6, #626BF1)",
					boxShadow: "0px 2rpx 10rpx 0px #DADCE8",
					borderRadius: "31rpx",
					color: "#fff"
				},
				opt_zydm:'',
				rules: {
					bjmc: [{
						required: true,
						message: '请填写班级名称',
						trigger: ['change', 'blur'],
						min:2,
						max:16
					}]
				},
				info:{
					schoolId:null,
					schoolName:''
				},
				wxUserId:{
					openid:'',
					unionid:''
				}
			}
		},
		onLoad(opt) {
			//console.log('wxuerid');
			//console.log(uni.getStorageSync('wxUserId'));
			this.info.schoolId = opt.id
			this.info.schoolName = opt.name
			this.getZyList();
			this.getXjList();
			this.wxUserId = uni.getStorageSync('wxUserId')
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			getZyList() {
				this.$api.post({
					url: '/dzy/list'
				}, {
					schoolid: this.info.schoolId
				}).then(res => {
					res.list.forEach((item, index) => {
						var object = {};
						object.label = item.zymc; // 展示label
						object.value = item.zydm; // value
						this.form.zylist.push(object);
						//根据页面传值 设置默认专业
						if(item.zydm==this.opt_zydm){
							this.form.zydm=item.zydm;
							this.form.zymc=item.zymc;
						}
					});
				})
			},
			getBjList() {
				this.form.bjlist = [];
				this.form.bjdm = '';
				this.form.bjid = '';
				this.$api.post({
					url: '/dclass/getclasslist'
				}, {
					schoolid: this.info.schoolId,
					zydm: this.form.zydm,
					xj: this.form.xj
				}).then(res => {
					//console.log(res.list)
					res.list.forEach((item, index) => {
						var object = {};
						object.label = item.bjmc; // 展示label
						object.value = item.id; // value
						this.form.bjlist.push(object);
					});
				})
			},
			getXjList() {
				this.$api.post({
					url: '/comm/getXj'
				}).then(res => {
					res.list.forEach((item, index) => {
						var object = {};
						object.label = item + '级'; // 展示label
						object.value = item; // value
						this.form.xjlist.push(object);
					});
					//设置默认学级
					this.form.xj=this.form.xjlist[0].value;
					this.form.xjmc=this.form.xjlist[0].label;
				})
			},
			confirm(e) {
				this.form.zydm = e[0].value;
				this.form.zymc = e[0].label;
				this.getBjList();
			},
			confirmbj(e) {
				this.form.bjid = e[0].value;
				this.form.bjmc = e[0].label;
			},
			confirmxj(e) {
				this.form.xj = e[0].value;
				this.form.xjmc = e[0].label;
				this.getBjList();
			},
			handleHoldOnCreate(){
				let params = {
					schoolid: this.info.schoolId,
					zydm: this.form.zydm,
					xj: parseInt(this.form.xj),
					classid: null,
					name: this.user.nickName,
					icon: this.user.avatarUrl,
					appletopenid: this.wxUserId.openid,
					unionid: this.wxUserId.unionid,
					schoolname: this.info.schoolName,
					reason: '',
					type: 2,// 老师
					mobile: ''
				}
				this.$api.post({
					url: '/regedit/save',method:'post'
				}, params).then(res => {
					//console.log(res)
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: '提交成功！',
							type: 'success',
							duration: '2300'
						})
						uni.navigateTo({
							url: './result'
						})				
					}
				})
			},
			createclass() {
				wx.vibrateShort();
				this.$refs.uForm.validate(valid => {
					if (valid) {
						let params = {
							schoolid: this.info.schoolId,
							xj: this.form.xj,
							classid: this.form.bjid,
							bjmc: this.form.bjmc,
							trId:null,
							trName:this.user.nickName,
							zydm: this.form.zydm
						};
						this.$api.post({ url: '/dclass/trCreateClass',method:'post' }, params).then(res => {
							if (res.code == '0') {
								this.$refs.uTips.show({ title: '添加成功！', type: 'success', duration: '2300' })
								setTimeout(() => { wx.navigateBack() }, 2300);
							}
						})
					}
				})
			}
		},
	}
</script>

<style scoped>
	.main-cont {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.tr {
		margin-top: 100rpx;
	}

	.tr-name {
		margin: 20rpx 0;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #181623;
	}

	.school {
		font-size: 28rpx;
		font-family: PingFang SC;
		color: #5F6572;
	}

	.select {
		margin-top: 68rpx;
	}

	.posa {
		position: absolute;
		top: 0;
		right: 35rpx;
	}

	.text {
		padding: 0 15rpx;
		width: 500rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: #F8F9FC;
		border-radius: 8rpx;
		color: #AEB8CF;
		font-size: 28rpx;
	}
</style>
